<route lang="json5">
{
  meta: {
    auth: false,
    hidden: true,
    layout: 'Empty',
    title: '登录',
  },
}
</route>
<style lang="scss" scoped>
.arco-form {
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.062);
  @apply relative overflow-hidden px-4 bg-white;
  @apply flex items-center justify-center flex-col;
  @apply w-full sm:w-72 sm:ml-auto md:ml-[unset];
  &::before {
    content: '';
    z-index: 10;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.082);
    @apply absolute w-80 h-80 rotate-45 -left-44 -bottom-16  rounded-3xl;
    @apply bg-[var(--u-primary)] opacity-50;
  }
  .arco-row {
    z-index: 20;
    // opacity: 0.85;
  }
}
</style>
<template>
  <DefineBall>
    <Icon icon="ph:tennis-ball-fill" class="h-16 w-16 text-[#A2C640]" />
  </DefineBall>
  <div
    :class="['bg-[var(--u-bg-green)]', 'h-full w-full flex select-none', ' bg-no-repeat bg-contain bg-bottom relative']"
    ref="boxRef"
  >
    <RenderBall
      v-for="[left, top] in [
        ['30px', '60px'],
        ['70%', '70%'],
        ['20%', '600px'],
        ['239px', '46%'],
        ['84%', '23%'],
      ]"
      :style="[defaultStyle, { left, top }]"
      class="absolute !h-12 !w-12 opacity-60"
    />
    <div id="point1" class="absolute left-0 bottom-[23vw]">
      <RenderBall class="ball opacity-0" />
    </div>
    <div id="point2" class="absolute left-[33vw] bottom-0">
      <RenderBall class="ball opacity-0" />
    </div>
    <div id="point3" class="absolute right-[33vw] bottom-0">
      <RenderBall class="ball opacity-0" />
    </div>
    <div id="point4" class="absolute right-0 bottom-[23vw]">
      <RenderBall class="ball opacity-0" />
    </div>

    <div class="h-full w-full md:h-[30rem] md:w-auto m-auto flex">
      <div :class="['hidden sm:block bg-white w-[30rem] scale-90 translate-x-20 ', ' use-glass pl-12 pr-24 space-y-2']">
        <p class="text-3xl font-bold flex items-center first-letter mt-24 mb-8">
          One Affinity Tennis
          <br />
          Experience Center
        </p>
        <p class="text-sm font-bold">@pakchoi</p>
        <p class="text-sm font-bold">@2023-12.29</p>
        <p class="text-sm font-bold">@Introduction</p>
        <p class="text-sm text-gray-500">
          In the process of internal desktop applications development, many different design specs and implementations
          would be involved, which might cause designers and developers difficulties and duplication and reduce the
          efficiency of development.
        </p>
        <p class="text-sm font-bold">bg made of vue3 and arco.design</p>
      </div>
      <a-form ref="formRef" class="form use-glass" :model="data" auto-label-width @submit="handleSubmit">
        <a-form-item>
          <p class="text-center font-bold text-3xl w-full text-[var(--u-primary)]">登录</p>
        </a-form-item>
        <a-form-item field="username" :rules="{ required: true, message: '账号不能为空' }" hide-asterisk>
          <a-input v-model="data.username" placeholder="账号" allow-clear>
            <template #prefix>
              <Icon icon="mdi:account-outline" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item field="password" :rules="{ required: true, message: '密码不能为空' }" hide-asterisk>
          <a-input-password v-model="data.password" placeholder="密码" allow-clear>
            <template #prefix>
              <Icon icon="mdi:password-outline" />
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item class="mt-4">
          <a-button type="secondary" long html-type="submit">
            {{ data.isLogin ? '登录' : '注册并登录' }}
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { BASE_HOME_NAME } from '@/conf'
import { range } from 'lodash-es'
import Parabola from 'parabola-js'

const USE_REGIN = false
const boxRef = ref()
const { logIn } = useAccount()
const { createStyle } = useMoveByMouse(boxRef)
const [DefineBall, RenderBall] = createReusableTemplate()
const defaultStyle = createStyle()

const router = useRouter()
const formRef = ref()
const data = reactive({
  username: 'test',
  password: '',
  isLogin: true,
})
async function handleSubmit({ errors }: any) {
  if (errors) return
  await logIn(data)
  router.push({ name: BASE_HOME_NAME })
}

function handleChangeIsLogin(isLogin: boolean) {
  Object.assign(data, { isLogin })
  formRef.value?.resetFields()
}

onMounted(() => {
  const [position1, position2, position3, position4] = range(4).map((e, i) => {
    const point = document.querySelector(`#point${i + 1}`) as HTMLElement
    const ball = document.querySelector(`#point${i + 1} .ball`) as HTMLElement
    return { point, ball }
  })

  const run = (source: typeof position1, target: typeof position1) => {
    source.ball.style.opacity = '1'
    return new Promise((ok) => {
      new (Parabola as any)(source.ball, target.point, {
        curvature: 0.001,
        speed: 260,
        complete: async () => {
          source.ball.style.opacity = '0'
          ok('')
        },
      }).init()
    })
  }

  ;(async function to() {
    await run(position1, position3)
    await run(position3, position4)
    await run(position4, position2)
    await run(position2, position1)
    to()
  })()
})
</script>
